<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章列表</span>
      </div>
      <!-- 搜索区域 -->

      <div class="search-box">
        <el-form :inline="true" :model="q" ref="searchForm">
          <el-form-item label="文章分类">
            <el-select v-model="q.cate_id" placeholder="请选择分类" size="small">
              <el-option v-for="item in cateList" :key="item.id" :label="item.cate_name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态" style="margin-left: 15px;">
            <el-select v-model="q.state" placeholder="请选择状态" size="small">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sRenderForm" size="small">筛选</el-button>
            <el-button type="info" size="small">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 发表文章的按钮 -->
        <el-button type="primary" size="small" class="btn-pub" @click="dialogVisible=true">发表文章</el-button>
      </div>

      <!-- 文章表格区域 ，也就是弹出窗区域-->
      <el-dialog
        title="发表文章"
        :visible.sync="dialogVisible"
        fullscreen>
        <!-- 表单区域 -->
        <el-form ref="diaform" :model="diaform" :rules="diaformRules" label-width="80px">
          <!-- 活动名称 -->
          <el-form-item label="活动名称" prop="title" >
            <el-input v-model="diaform.title"></el-input>
          </el-form-item>
          <!-- 类型选择，这个需要请求数据渲染 -->
          <el-form-item label="活动区域" prop="cate_id">
            <el-select v-model="diaform.cate_id" style="width: 100%;">
              <el-option  v-for="item in cateList" :key="item.id" :value="item.id" :label="item.cate_alias" ></el-option>
              <!-- 问题就出现在这里，表单之间的练习不能落下以后按键左边全部是小拇指负责 -->
            </el-select>
          </el-form-item>
          <!-- 富文本编辑器的样式，要用到less的一个知识点，即less的/deep/知识点 -->
          <el-form-item label="文章内容" prop="content">
            <!-- 使用 v-model 进行双向的数据绑定 -->
            <quill-editor v-model="diaform.content" class="ql-editor"></quill-editor>
          </el-form-item>
          <el-form-item label="文章封面" prop="cover_img">
            <!-- 处理图像数据时Vue的一个难点，千万不要急，好好学 -->
            <img :src="imgUrl"  class="cover-img" ref="imgRef" />
             <br />
            <!-- 文件选择框，默认被隐藏 -->
            <input type="file" style="display: none;" accept="image/*" ref="iptFile" :v-model="diaform.cover_img" @change="diaUpImg" />
            <!-- 选择封面的按钮 -->
            <el-button type="text" @click="$refs.iptFile.click()">+ 选择封面</el-button>
          </el-form-item>
          <el-form-item  prop="state">
             <el-button type="primary" @click="pubDiaForm('已发布')">发布</el-button>
             <el-button type="primary" @click="pubDiaForm('草稿')">存为草稿</el-button>
          </el-form-item>

        </el-form>

      </el-dialog>

      <!-- 分页区域 -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ArtList',
  data () {
    return {
      // 查询参数对象
      q: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      dialogVisible: false,
      diaform: {
        title: '',
        cate_id: '',
        content: '',
        state: '',
        cover_img: ''

      },
      diaformRules: {
        title: [
          { required: true, message: '请输入数据', trigger: 'blur' },
          { pattern: /^\S{1,9}$/, message: '请输入数据', trigger: 'blur' }
        ],
        cate_id: [
          { required: true, message: '请输入数据', trigger: 'blur' },
          { pattern: /^[0-9]{1,9}$/, message: '请输入数据', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        state: [
        ],
        cover_img: [
          { required: true, message: '请输入数据', trigger: 'blur' }
        ]

      },
      cateList: [],
      imgUrl: ''
    }
  },
  methods: {
    async updatCateList () {
      const { data: res } = await this.$axios.get('/my/cate/list')
      if (res.code !== 0) return this.$message.error(res.message)
      this.cateList = res.data
    },
    diaUpImg (e) {
      console.log(e.target.files[0])
      // 这个方法是不行的无法得到正确的URL路径，这个时候对提交的图片文件有两种处理方法，
      // 第一种base 64 方法 第二种 URL 方法 ，这两种方法我将分别演示
      // this.diaform.cover_img = e.target.files[0] (错误的方法)
      // 第一种方法,Url
      const url = URL.createObjectURL(e.target.files[0])
      console.log(url)
      this.diaform.cover_img = e.target.files[0]
      this.imgUrl = url
    },
    pubDiaForm (value) {
      this.diaform.state = value
      console.log(this.diaform)

      this.$refs.diaform.validate(async valid => {
        console.log(valid)
        if (!valid) return
        // this.diaform = new FormData(this.diaform)
        // 这里传输的数据出现了问题，此时我应该怎么办，第一步，看文档
        // 请求体（FormData 格式）：这里的意思是所有的数据都应该是FormData格式
        // 如何将一个数组转换成FormData格式，这成为了我们研究的话题，
        // 先来一个愚蠢的办法，一个一个添加
        const fn = new FormData()
        console.log(this.diaform)
        // 转化成formdata二进制，这几乎是一个固定的写法
        Object.keys(this.diaform).forEach(k => fn.append(k, this.diaform[k]))
        // 即便这样添加了，还是没过，那就肯定是图片数据不能数Bolb地址，需要是源文件

        const { data: res } = await this.$axios.post('/my/article/add', fn)
        if (res.code !== 0) this.$message.error(res.message)
        this.$message.success(res.message)
        this.$refs.diaform.resetFields()
        this.imgUrl = ''
        this.dialogVisible = false
      })
      // this.diaform.state = value
      // console.log(value)
      // const fd = new FormData(this.diaform)
      // console.log(fd)

      // await this.$axios.post('/my/article/add',)
    },
    sRenderForm () {
      // 为什么报错，因为没有进行兜底校验，只要是表单，就要进行兜底校验,
      // 下次再试一下，不一定要做兜底校验
      this.$refs.searchForm.validate(async valid => {
        console.log(valid)
        if (!valid) return
        const { data: res } = await this.$axios.get('/my/article/list', { params: { ...this.q } })
        if (res.code !== 0) return this.$message.error(res.message)
        this.$message.success(res.message)
        console.log(res)
      })
    }
  },
  // 取回渲染cate_id渲染数据
  created () {
    this.updatCateList()
  }
}
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .btn-pub {
    margin-top: 5px;
  }
}
/deep/ .ql-editor {
  min-height: 300px;
}
.cover-img {
  width: 400px;
  height: 280px;
  object-fit: cover;
}

</style>
